/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="recharge-box">
				<view class="recharge-item pay title">支付方式</view>
				<view class="recharge-item time title">日期</view>
				<view class="recharge-item price title">金额</view>
				<view class="recharge-item status title">状态</view>
			</view>
		</view>
		<block v-for="(item,index) in rechargeList" :key="index">
			<view  class="point-box">
				<view class="point-item cont">{{item.pay_name}}</view>
				<view class="point-item time">{{item.ctime}}</view>
				<view class="point-item price">{{item.account}}</view>
				<view class="point-item status">
				  {{item.pay_status==0?'待付款':''}}{{item.pay_status==1?'已支付':''}}{{item.pay_status==2?'支付失败':''}}
				 
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import common from "@/common/common.js";
	import {getRecharge} from "@/api/api.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				rechargeList:"",//充值list
				total:"",
				params:{
					size:10,
				}
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			
			if(this.hasLogin){
				this.getRecharge(this.params);
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods:{
			/*充值记录*/ 
			getRecharge(params){
				getRecharge(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.ctime,'yyyy')
						i.ctime=time
					})
					this.rechargeList=res.records;
					this.total=res.total;
				})
			},
			onReachBottom(){//下拉加载数据
				
				if(this.rechargeList.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.size+=9;
				if(this.hasLogin){
					this.getRecharge(this.params)
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding: 20rpx 20rpx;
	}

	.recharge-box {
		background: #F0F0F0;
		font-size: 26rpx;
		color: #666666;
		width: 100%;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}

	.recharge-item {
		display: inline-block;
		width: 25%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #666;
	}

	/* .recharge-box .pay{
    width: 35%;
}
.recharge-box .time{
    width: 23%;
}
.recharge-box .price{
    width: 20%;
}
.recharge-box .status{
    width: 22%;
    color: #ff3b3b;
} */
	.point-box {
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
		/* padding-left: 5rpx; */
	}

	.point-box:nth-child(odd) {
		background: #fff;
	}

	.point-box:nth-child(even) {
		background: #FAFAFA;
	}

	.point-item {
		display: inline-block;
		width: 25%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #666;
	}

	.point-box .cont {
		color: #808080;
	}

	.point-box .price {
		color: #ff3b3b;
		text-align: center;
	}

	.point-box .time {
		color: #808080;
	}

	.point-box .status {
		color: #808080;
	}

	.point-box .title {
		text-align: center;
	}
</style>
